<template>
  <Page v-slot:default="{contentClass}" :style="{backgroundColor: item?.coupon_tpl?.color}">
    <div :class="contentClass" v-if="item">
        <div class="ml-4 mr-4 bg-white shadow flex flex-col justify-center items-center p-2 rounded-sm pb-4">
            <div class=" text-gray-500 text-sm mt-4">植得口腔</div>
            <div class=" font-bold text-xl mt-2 text-gray-700">{{item.coupon_tpl?.name}}</div>
            <div class=" font-bold text-xs mt-2 text-gray-700">{{item.coupon_tpl?.money_limit ? item.coupon_tpl?.condition : '无门槛'}}</div>
            <div class=" font-bold text-xs mt-2 text-gray-500">
              <template v-if="item.end_time">
                有效期至 {{item.end_time}}
              </template>
              <template v-else>
                长期有效
              </template>
            </div>
            <van-button v-if="item.coupon_status==1" :color="item.coupon_tpl?.color" style="margin-top: 1rem; width: 10rem; border-radius: .2rem;" @click="onOffWrite">使 用</van-button>
            <van-button v-else :color="item.coupon_tpl?.color" style="margin-top: 1rem; width: 10rem; border-radius: .2rem;">{{item.couponStatusText}}</van-button>
        </div>

        <div class="ml-4 mr-4 mt-4 bg-white shadow rounded-sm">
          <div class="text-sm text-gray-400 p-2">使用说明</div>
          <div class="text-sm text-gray-500 p-2" style="word-break: break-word;" v-html="p(item.coupon_tpl?.directions)">
          </div>
        </div>
    </div>
  </Page>
</template>

<script setup>
import {ref} from 'vue';
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import Page from "../../components/Page.vue"
import {computed, onMounted, watch} from "vue";

import apis from '../../apis'

const store = useStore()
const router = useRouter()
const route = useRoute()

const item = ref(null)

apis.coupon.show_coupon(route.query.id, {}).then(({data: result}) => {
  item.value = result.data
})

const onOffWrite = () => {
  router.push({name: 'coupon_qrcode', query: { id: item.value.id }})
}

function p(text) {
  if (!text) return ""
  return text.split('\n').map((line) => {
    return "<p>" + line + "</p>"
  }).join("");
}
</script>

<style scoped>

</style>